<!--
 * 活动活动页面
 *
 * @Author: zjd
 * @Date: 2024-5-22
-->
<template>
    <div class="fater-body-show">
        <el-card shadow="never">
            <div slot="header" class="iconfont icon-search-button" style="font-size: 24px;"> 信息查询</div>
            <div>
                <el-form :inline="true" :model="qryForm">
                    <el-form-item>
                        <el-input
                            v-model="qryForm.teamName"
                            placeholder="输入团队名称"
                            autocomplete="off"
                        ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input
                            v-model="qryForm.activeName"
                            placeholder="输入活动名称…"
                            autocomplete="off"
                        ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button
                            type="primary"
                            style="font-size: 14px"
                            icon="iconfont icon-sousuo"
                            @click="getPageLikeInfo()"
                        >
                            搜索</el-button
                        >
                    </el-form-item>
                </el-form>
            </div>
        </el-card>

        <el-card shadow="never">
            <div v-if="userType == 1" slot="header">
                <el-button
                    type="primary"
                    style="font-size: 18px"
                    icon="iconfont icon-tianjia"
                    @click="showAddWin()"
                >
                    新增</el-button
                >
            </div>
            <div>
                <el-table
                    v-loading="loading"
                    element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(124, 124, 124, 0.8)"
                    :data="pageInfos"
                    border
                >
                    <el-table-column
                        align="center"
                        type="index"
                    ></el-table-column>
                    <el-table-column
                        align="center"
                        prop="name"
                        label="活动名称"
                    ></el-table-column>
                    <!-- <el-table-column
                        align="center"
                        prop="teamName"
                        label="发布活动"
                    ></el-table-column> -->
                    <el-table-column
                        align="center"
                        prop="activeTime"
                        label="活动时间"
                    ></el-table-column>


                    <!-- dra 添加进度-->
                    <el-table-column
                     align="center"
                      prop="progress"
                     label="活动进度">
                            <template slot-scope="scope">
                                 <span>{{ getProgressText(scope.row.progress) }}</span>
                            </template>
                 </el-table-column>
                 
                 <el-table-column
                 v-if="userType == 1"
                    align="center"
                      label="更改进度">
                      <template slot-scope="scope">
    <el-select v-model="scope.row.progress" @change="() => updInfo(scope.row)">
        <el-option label="未进行" value="1"></el-option>
        <el-option label="进行中" value="2"></el-option>
        <el-option label="已结束" value="3"></el-option>
    </el-select>
</template>
               </el-table-column>
            





                    <el-table-column
                        align="center"
                        prop="total"
                        label="报名人数"
                    ></el-table-column>

                    <!-- dra qr -->
                    <el-table-column label="生成二维码">
    <template slot-scope="scope">
        <el-button @click="generateQrCode(scope.row.detail)">生成二维码</el-button>
    </template>
</el-table-column>

<el-dialog :visible.sync="showQrDialog" width="30%">
        <div id="qrcode"></div>
    </el-dialog>


                    <el-table-column align="center" label="参与人员">
                        <template slot-scope="scope">
                            <el-popover
                                title="活动参与人员"
                                trigger="click"
                                @show="getActivePeople(scope.row.id)"
                                :width="550"
                                placement="left"
                            >
                                <el-table :data="activeLogs" border>
                                    <el-table-column
                                        align="center"
                                        type="index"
                                    ></el-table-column>
                                    <el-table-column
                                        align="center"
                                        prop="userName"
                                        label="参与人员"
                                    ></el-table-column>
                                    <el-table-column
                                        align="center"
                                        prop="userPhone"
                                        label="联系电话"
                                    ></el-table-column>
                                    <el-table-column
                                        align="center"
                                        prop="createTime"
                                        label="报名时间"
                                    ></el-table-column>
                                </el-table>
                                <el-button
                                    type="primary"
                                    style="font-size: 14px"
                                    icon="iconfont icon-jiarujiazu"
                                    slot="reference"
                                    > 参与人员</el-button
                                >
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column
                        v-if="userType == 0"
                        align="center"
                        label="操作处理"
                    >
                        <template slot-scope="scope">
                            <el-button
                                style="font-size: 14px"
                                icon="iconfont icon-shanchu"
                                type="danger"
                                @click="delInfo(scope.row.id)"
                            ></el-button>
                        </template>
                    </el-table-column>
                    <el-table-column v-else align="center" label="了解更多">
                        <template slot-scope="scope">
                            <el-popover
                                trigger="click"
                                :width="700"
                                placement="left"
                            >
                                <el-button
                                    @click="active(scope.row.id)"
                                    style="margin-bottom: 15px; font-size: 18px"
                                    type="primary"
                                    icon="iconfont icon-tianjia"
                                > 我要报名</el-button
                                >
                                <el-descriptions
                                    :column="1"
                                    size="small"
                                    border
                                >
                                    <el-descriptions-item>
                                        <template slot="label"
                                            >活动标题</template
                                        >
                                        {{ scope.row.name }}
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template slot="label"
                                            >发布活动</template
                                        >
                                        {{ scope.row.teamName }}
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template slot="label"
                                            >活动时间</template
                                        >
                                        {{ scope.row.activeTime }}
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template slot="label"
                                            >活动概述</template
                                        >
                                        {{ scope.row.comm }}
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template slot="label"
                                            >活动要求</template
                                        >
                                        {{ scope.row.ask }}
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template slot="label"
                                            >活动详情</template
                                        >
                                        {{ scope.row.detail }}
                                    </el-descriptions-item>
                                </el-descriptions>
                                <el-button
                                    type="primary"
                                    style="font-size: 14px"
                                    icon="iconfont icon-r-list"
                                    slot="reference"
                                    > 查看详情</el-button
                                >
                            </el-popover>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    v-if="pageTotal >= 0"
                    style="margin-top: 15px"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageIndex"
                    :page-sizes="[5, 10, 20, 50]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalInfo"
                >
                </el-pagination>
            </div>
        </el-card>
         <!-- dra 实现模板 -->
        <el-dialog
            title="添加信息"
            :fullscreen="true"
            :visible.sync="showAddFlag"
        >
        
            <el-form label-width="90px" :model="activitiesForm">
                <el-form-item label="选择模板">
    <el-select v-model="selectedPreset" placeholder="请选择模板" @change="applyPreset">
        <el-option
            v-for="option in presetOptions"
            :key="option.id"
            :label="option.name"
            :value="option.id"
            @change="applyPreset"
        ></el-option>
    </el-select>
</el-form-item>
                <el-form-item label="活动名称">
                    <el-input
                        v-model="activitiesForm.name"
                        placeholder="请输入活动名称…"
                        autocomplete="off"
                    ></el-input>
                </el-form-item>
                <el-form-item label="活动时间">
                    <el-date-picker
                        style="width: 100%"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        v-model="activitiesForm.activeTime"
                        type="datetime"
                        placeholder="选择活动时间…"
                    ></el-date-picker>
                </el-form-item>
                <!-- <el-form-item label="发布活动">
                    <el-select
                        style="width: 100%"
                        v-model="activitiesForm.teamId"
                        placeholder="请选择发布活动…"
                    >
                        <el-option
                            v-for="(item, index) in teams"
                            :key="index"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item label="活动概述">
                    <el-input
                        type="textarea"
                        rows="6"
                        v-model="activitiesForm.comm"
                        placeholder="请输入活动概述…"
                        autocomplete="off"
                    ></el-input>
                </el-form-item>
                <el-form-item label="活动要求">
                    <el-input
                        type="textarea"
                        rows="6"
                        v-model="activitiesForm.ask"
                        placeholder="请输入活动要求…"
                        autocomplete="off"
                    ></el-input>
                </el-form-item>
                <el-form-item label="活动详情">
                    <el-input
                        type="textarea"
                        rows="10"
                        v-model="activitiesForm.detail"
                        placeholder="请输入活动详情…"
                        autocomplete="off"
                    ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showAddFlag = false">取 消</el-button>
                <el-button type="primary" @click="addInfo()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<style>
</style>

<script>

import {
    
    addActiveLogs,
    getManTeamList,
    getLoginUser,
    getActiveLogs,
    getPageActivities,
    addActivities,
    updActivities,
    delActivities,
} from "../../api";
// dra  qr
import QRCode from 'qrcodejs2';

// import VueQr from 'vue-qr';

export default {
    
    data() {
        return {
            showQrDialog: false,  // 控制二维码对话框的显示
            teams: [],
            userType: "",
            activeLogs: [],
            pageInfos: [],
            pageIndex: 1,
            pageSize: 10,
            pageTotal: 0,
            totalInfo: 0,
            loading: true,
            showAddFlag: false,
            qryForm: {
                token: this.$store.state.token,
                teamName: "",
                activeName: "",
            },
            // dra 添加进度
            activitiesForm: {
                id: "",
                name: "",
                comm: "",
                detail: "",
                ask: "",
                total: 1,
                activeTime: "",
                teamId: "",
                progress:1,
            },
            // dra 实现模板
            presetOptions: [
            {
                id: 1,
                name: '技术分享会',
                activeTime: '2023-10-01 10:00:00',
                teamId: '1',
                comm: '探讨最新技术趋势',
                ask: '带好笔记本',
                detail: '本次分享会我们将探讨AI的最新发展。'
            },
            {
                id: 2,
                name: '年度总结会',
                activeTime: '2023-12-30 15:00:00',
                teamId: '1',
                comm: '年度工作回顾',
                ask: '准备个人总结',
                detail: '回顾过去一年的工作成就和不足。'
            },
            {
                id: 3,
                name: '团队建设活动',
                activeTime: '2023-08-15 08:00:00',
                teamId: '1',
                comm: '增强团队凝聚力',
                ask: '穿着休闲',
                detail: '通过户外活动增强团队合作。'
            }
        ],
        selectedPreset: null, 
        };
    },
    methods: {
        getActivePeople(activeId) {
            getActiveLogs(activeId).then((resp) => {
                this.activeLogs = [];
                this.activeLogs = resp.data;
            });
        },

        getPageInfo(pageIndex, pageSize) {
            getPageActivities(pageIndex, pageSize, this.qryForm.token).then(
                (resp) => {
                    this.pageInfos = resp.data.data;
                    this.pageIndex = resp.data.pageIndex;
                    this.pageSize = resp.data.pageSize;
                    this.pageTotal = resp.data.pageTotal;
                    this.totalInfo = resp.data.count;

                    this.loading = false;
                }
            );
        },
        getPageLikeInfo() {
            getPageActivities(
                1,
                this.pageSize,
                this.qryForm.token,
                this.qryForm.teamName,
                this.qryForm.activeName
            ).then((resp) => {
                this.pageInfos = resp.data.data;
                this.pageIndex = resp.data.pageIndex;
                this.pageSize = resp.data.pageSize;
                this.totalInfo = resp.data.count;
                this.pageTotal = resp.data.pageTotal;
                this.loading = false;
            });
        },
        handleSizeChange(pageSize) {
            this.getPageInfo(
                this.pageIndex,
                pageSize,
                this.qryForm.token,
                this.qryForm.teamName,
                this.qryForm.activeName
            );
        },
        handleCurrentChange(pageIndex) {
            this.getPageInfo(
                pageIndex,
                this.pageSize,
                this.qryForm.token,
                this.qryForm.teamName,
                this.qryForm.activeName
            );
        },
        // dra 添加进度
        initForm() {
            this.activitiesForm = {
                id: "",
                name: "",
                comm: "",
                detail: "",
                ask: "",
                total: 1,
                activeTime: "",
                teamId: "",
                progress:1,
            };
        },
        showAddWin() {
            this.initForm();
            this.showAddFlag = true;
        },
        active(id) {
            addActiveLogs({
                token: this.$store.state.token,
                activeId: id,
            }).then((resp) => {
                if (resp.code == 0) {
                    this.$message({
                        message: resp.msg,
                        type: "success",
                    });
                } else {
                    this.$message({
                        message: resp.msg,
                        type: "warning",
                    });
                }
            });
        },
        addInfo() {
            addActivities(this.activitiesForm).then((resp) => {
                this.$message({
                    message: resp.msg,
                    type: "success",
                });

                this.getPageInfo(1, this.pageSize, this.qryForm.token);

                this.showAddFlag = false;
            });
        },
        // dra 添加进度
    //     updInfo() {
    //         updActivities(this.activitiesForm).then((resp) => {
    //             this.$message({
    //                 message: resp.msg,
    //                 type: "success",
    //             });
    //             this.getPageInfo(1, this.pageSize, this.qryForm.token);
    // }).catch(error => {
    //     this.$message.error('更新失败');
    //     console.error('Update failed:', error);
    

    //             // this.getPageInfo(1, this.pageSize, this.qryForm.token);

    //             // this.showAddFlag = false;
    //         });
    updInfo(row) {
        updActivities(row).then((resp) => {
            this.$message({
                message: resp.msg,
                type: "success",
            });
            this.getPageInfo(1, this.pageSize, this.qryForm.token);
        }).catch(error => {
            this.$message.error('更新失败');
            console.error('Update failed:', error);
        });
    },
            
        
        delInfo(id) {
            this.$confirm("删除活动将同时删除报名记录, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                delActivities(id).then((resp) => {
                    this.$message({
                        message: resp.msg,
                        type: "success",
                    });

                    this.getPageInfo(1, this.pageSize, this.qryForm.token);
                });
            });
        },
        // dra 实现模板
        applyPreset() {
            const preset = this.presetOptions.find(p => p.id === this.selectedPreset);
            if (preset) {
                this.$set(this.activitiesForm, 'name', preset.name);
        this.$set(this.activitiesForm, 'activeTime', preset.activeTime);
        this.$set(this.activitiesForm, 'teamId', preset.teamId);
        this.$set(this.activitiesForm, 'comm', preset.comm);
        this.$set(this.activitiesForm, 'ask', preset.ask);
        this.$set(this.activitiesForm, 'detail', preset.detail);

                // 打印更新后的表单数据
                console.log('Updated activitiesForm:', this.activitiesForm);

                // 使用 $nextTick 来确保 DOM 更新
                this.$nextTick(() => {
                    console.log('DOM updated after preset application');
                });
            }
        },
        //dra 添加进度
        getProgressText(progress) {
        if (progress === 1) {
            return '未进行';
        } else if (progress === 2) {
            return '进行中';
        } else if (progress === 3) {
            return '已结束';
        } else {
            return 'aaaa'; // 默认返回原始值
        }
    },
    
    // dra qrcode
    generateQrCode(detail) {
    this.showQrDialog = true;  // 显示对话框
    this.$nextTick(() => {
        const element = document.getElementById('qrcode');
        if (element) {
            element.innerHTML = '';  // 清空之前的内容
            new QRCode(element, {
                text: detail,
                width: 200,
                height: 200,
                colorDark: "#000000",
                colorLight: "#ffffff",
                correctLevel: QRCode.CorrectLevel.H
            });
            // 确保QR码已经渲染完成
            this.$nextTick(() => {
                const canvas = element.querySelector('canvas');
                if (canvas) {
                    const imageUrl = canvas.toDataURL("image/png"); // 将canvas转换为图片的URL
                    const downloadLink = document.createElement('a');
                    downloadLink.href = imageUrl;
                    downloadLink.download = 'QRCode.png'; // 设置图片文件名
                    downloadLink.click(); // 触发下载
                }
            });
        } else {
            console.error('QRCode element not found');
        }
    });
}
    },
    mounted() {
        this.getPageInfo(1, this.pageSize, this.qryForm.token);

        getLoginUser(this.$store.state.token).then((resp) => {
            this.userType = resp.data.type;

            getManTeamList(resp.data.id).then((resp) => {
                this.teams = resp.data;
            });
        });
    },
    
};
</script>
